<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="top-div">
          <div class="d1">今日货物数量</div>
          <div class="d2">货物数量</div>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="span6">
                <img src="../../../assets/num-1.png" alt width="40px">
                <div class="div1">800</div>
                <div class="div2">总入库数</div>
                <div class="div3" style="color:#F39A00">+10% 对比昨日</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="span6">
                <img src="../../../assets/num-2.png" alt width="40px">
                <div class="div1">650</div>
                <div class="div2">总出库数</div>
                <div class="div3" style="color:#0256FF">+8% 对比昨日</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="span6">
                <img src="../../../assets/num-3.png" alt width="40px">
                <div class="div1">700</div>
                <div class="div2">总出库数</div>
                <div class="div3" style="color:#D3416F">+2% 对比昨日</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="span6">
                <img src="../../../assets/num-4.png" alt width="40px">
                <div class="div1">500</div>
                <div class="div2">新增出库量</div>
                <div class="div3" style="color:#20AEF3">+3% 对比昨日</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10">
        <img src="../../../assets/zhexian.png" alt style="width:100%;max-height:248px">
      </el-col>
    </el-row>
    <div class="tableDiv">
      <div style="margin-bottom:20px">
        <el-date-picker v-model="value" type="date" placeholder="入库时间"></el-date-picker>
        <el-date-picker v-model="value2" type="date" placeholder="出库时间">
         
        </el-date-picker>
         <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="value1" style="width:240px"></el-input>
      </div>
      <el-table :data="tableData" style="width: 100%" class="custom-table">
        <el-table-column prop="a" label="货物类型" width="auto"></el-table-column>
        <el-table-column prop="b" label="货物名称" width="auto"></el-table-column>
        <el-table-column prop="c" label="订单号" width="auto"></el-table-column>
        <el-table-column prop="d" label="数量" width="auto"></el-table-column>
        <el-table-column prop="f" label="位置" width="auto"></el-table-column>
        <el-table-column prop="e" label="入库时间" width="auto"></el-table-column>
        <el-table-column prop="j" label="出库时间" width="auto"></el-table-column>
        <el-table-column prop="h" label="操作人" width="auto"></el-table-column>

        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">恢复</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="新增" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="70px">
            <el-form-item label="货物名称">
              <el-input v-model="formInline.user" placeholder="货物名称"></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
              <el-input v-model="formInline.user" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="供应商">
              <el-input v-model="formInline.user" placeholder="供应商"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      value1: "",
       value: "",
        value2: "",
      tableData: [
        {
          a: "食品",
          b: "内蒙古特产羊肋骨",
          c: "258794",
          d: "454",
          f: "1号货架",
          e: "2024-4-15",
          j: "2024-4-1",
          h: "李大胖"
        },
        {
          a: "食品",
          b: "山东特产黑猪排骨",
          c: "254789",
          d: "147",
          f: "1号货架",
          e: "2024-4-16",
          j: "2024-4-18",
          h: "李大胖"
        },
        {
          a: "食品",
          b: "辽宁北镇猪手",
          c: "123457",
          d: "589",
          f: "1号货架",
          e: "2024-4-15",
          j: "2024-4-19",
          h: "李大胖"
        },
        {
          a: "食品",
          b: "俄罗斯帝王蟹",
          c: "214566",
          d: "98",
          f: "1号货架",
          e: "2024-4-15",
          j: "2024-4-1",
          h: "李大胖"
        },
        {
          a: "食品",
          b: "陕西软籽石榴",
          c: "123456",
          d: "56",
          f: "2号货架",
          e: "2024-4-15",
          j: "2024-5-1",
          h: "李大胖"
        },
      
      
      
      ],
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 100%;
  padding: 20px;
  height: 248px;
  border-radius: 20px;
  background-color: #fff;
}
.top-div .d1 {
  color: #383838;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.top-div .d2 {
  color: #87888c;
  font-size: 12px;
  /* font-weight: 600; */
  margin-bottom: 20px;
}
.tableDiv {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
.span6 {
  height: 128px;
  border-radius: 10px;
  padding: 12px;
  background-color: #f4f7fe;
}
.span6 .div1 {
  color: #1a1a1a;
  font-size: 16px;
  margin-bottom: 8px;
}
.span6 .div2 {
  color: #333333;
  font-size: 12px;
  margin-bottom: 8px;
}
.span6 .div2 {
  color: #333333;
  font-size: 12px;
}
.span6 .div3 {
  font-size: 10px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}
/deep/ .el-input__inner {
  height: 32px;
}
/deep/ .el-input__icon {
  line-height: 32px;
}
</style>


